<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>List Of Articles</title>

    <link rel="stylesheet"
          href='<c:url value="/web-resources/css/pure-0.4.2.css"/>'>

    <link rel="stylesheet"
          href='<c:url value="/web-resources/css/font-awesome-4.0.3/css/font-awesome.css"/>'>

    <link rel="stylesheet"
          href='<c:url value="/web-resources/css/jquery-ui-1.10.4.custom.css"/>'>

    <style type="text/css">
        th {
            text-align: left
        }
    </style>


</head>

<body>
<div style="width: 95%; margin: 0 auto;">

    <a href="../../request/listRequests" style="text-decoration: underline; color: black;"><h1>Back to List Of Requests</h1></a>
    <h1>List Of Articles</h1>
    <br>
    <table class="pure-table pure-table-bordered pure-table-striped">
        <thead>
        <tr>
            <th width="4%">Id</th>
            <th width="19%">Title</th>
            <th width="19%">URL</th>
            <th width="19%">Author</th>
            <th width="19%">Date</th>
            <th width="19%">Source</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${articlesList}" var="article" varStatus="loopCounter">
            <tr>
                <td><c:out value="${article.id}"/></td>
                <td><c:out value="${article.title}"/></td>
                <td><c:out value="${article.url}"/></td>
                <td><c:out value="${article.author}"/></td>
                <td><c:out value="${article.date}"/></td>
                <td><c:out value="${article.source.name}"/></td>
                <td><nobr>
                    <a class="pure-button pure-button-primary"
                       onclick="return confirm('Are you sure you want to delete this article?');"
                       href="../delete/${article.id}"> <i class="fa fa-times"></i>Delete
                    </a>
                </nobr></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

</div>

<!--  It is advised to put the <script> tags at the end of the document body so they don't block rendering of the page -->
<script type="text/javascript"
        src='<c:url value="/web-resources/js/lib/jquery-1.10.2.js"/>'></script>
<script type="text/javascript"
        src='<c:url value="/web-resources/js/lib/jquery-ui-1.10.4.custom.js"/>'></script>
<script type="text/javascript"
        src='<c:url value="/web-resources/js/lib/jquery.ui.datepicker.js"/>'></script>
<script type="text/javascript"
        src='<c:url value="/web-resources/js/js-for-listBooks.js"/>'></script>
</body>
</html>